<template>
  <div class="city-submit-box">
    <div class="frame">
      <div class="wrapper">
        <input
          type="text"
          min="1"
          class="input"
          placeholder="输入学校、商务楼、地址"
          v-model="inputText"
          required="required"
        />
        <div class="cross" ref="cross" @click="handleClearInputText">x</div>
        <div class="tips" ref="tips">内容不能为空 !</div>
      </div>
      <input class="submit" type="submit" @click.prevent="handleSubmit" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: "",
      timer: null,
    };
  },
  watch: {
    inputText(value) {
      value
        ? (this.$refs.cross.style.display = "block")
        : (this.$refs.cross.style.display = "none");
    },
  },
  activated() {
    this.inputText = "";
  },
  methods: {
    handleSubmit() {
      if (!this.inputText.trim()) {
        clearTimeout(this.timer);
        this.$refs.tips.style.display = "block";
        this.timer = setTimeout(() => {
          this.$refs.tips.style.display = "none";
        }, 1000);
      } else {
        this.$emit("handleSubmit", this.inputText);
      }
    },
    handleClearInputText() {
      this.inputText = "";
    },
  },
};
</script>
<style lang="less" scoped>
.city-submit-box {
  padding-top: 44px;
  .frame {
    padding: 10px 20px;
    margin-top: 10px;
    border-bottom: 3px solid #e6e5f8;
    background-color: #fff;
    font-size: 14px;
    .wrapper {
      position: relative;
      .input {
        width: 100%;
        padding: 5px 10px;
        margin-bottom: 10px;
        border: 1px solid #e6e5f8;
      }
      .cross {
        position: absolute;
        display: none;
        top: 5px;
        right: 10px;
        font-size: 16px;
        font-weight: bold;
        color: var(--color-tint);
      }
      .tips {
        position: absolute;
        display: none;
        top: 0px;
        right: 50px;
        padding: 3px;
        border: 2px solid#bfbfbf;
        background-color: #fff;
        font-size: 12px;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: -5px;
          bottom: 0;
          margin: auto;
          width: 6px;
          height: 6px;
          border-top: 2px solid#bfbfbf;
          border-left: 2px solid#bfbfbf;
          background-color: #fff;
          transform: rotate(-45deg);
        }
      }
    }
    .submit {
      width: 100%;
      padding: 8px;
      text-align: center;
      border: none;
      background-color: var(--color-tint);
      color: #fff;
    }
  }
}
</style>
